import { useState } from "react";
import { Home } from "./Home";
import { InputArea } from "./InputArea";
import { TodoList } from "./TodoList";

export function TodolistZustand() {
  const [todoList, setTodoList] = useState<string[]>([]);
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <div
        style={{
          width: "50%",
          marginTop: "5%",
          display: "flex",
          flexDirection: "column",
          gap: "20px",
        }}
      >
        <InputArea
          getTodo={(todo) => {
            setTodoList([...todoList, todo]);
          }}
        />
        <TodoList
          todoList={todoList}
          deleteTodo={(index) => {
            setTodoList(
              todoList.filter((_item, _index) => {
                return _index !== index;
              })
            );
          }}
        />
      </div>
    </div>
  );
}
